<template>
  <div class="search">
    <form action="/">
      <van-search
        v-model="value"
        autofocus
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div class="histoy hishot">
      <div class="htheader">
        <div class="left">搜索记录</div>
        <div class="right">清除记录</div>
      </div>
      <div class="record"><span>语言</span><span>考研</span></div>
    </div>

    <div class="hot hishot">
      <div class="htheader">
        <div class="left">热门搜索</div>
      </div>
      <div class="record">
        <span>系统</span><span>运营</span><span>深度</span><span>线性</span
        ><span>学习</span><span>3dmax</span><span>spring</span><span>ui</span
        ><span>爬虫</span><span>wed</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      this.$router.go(-1);
    },
  },
  created() {
    this.$store.commit("tabHide");
  },
};
</script>

<style lang="scss">
.search {
  .hishot {
    font-size: 14px;
    .htheader {
      display: flex;
      justify-content: space-between;
      .left,
      .right {
        margin: 10px;
      }
    }
    span {
      display: inline-block;
      margin: 10px;
      border: 1px solid #eceef1;
      padding: 5px 10px;
      border-radius: 15px;
      color: #666;
    }
  }
}
</style>